<template>
    <div class="index-container">
        <v-breadcrumb :breadcrumbData="breadcrumbData"></v-breadcrumb>

        <div class="g-box">
            <div class="table">
                <table class="width100 vd-table">
                    <tbody>
                    <tr>
                        <td style="width:130px;">角色名称</td>
                        <td>
                            <el-input class="width-400" v-model="addobj.name"/>
                        </td>
                    </tr>
                    <tr>
                        <td>页面权限</td>
                        <td style="padding-top:5px;">
                            <div v-for="(item1,index1) in pages" :key="index1" class="auths">
                                <div class="item item1 flex-center flex-between mt-5" style="background:#eee">
                                    <div class="flex-center" @click="selectPageItem(index1,-1,-1)">
                                        <span class="zsf-icon"
                                              :class="item1.choose?'zsf-icon-yixuanze-':'zsf-icon-weixuanze-1'"></span>
                                        <span style="margin-left:3px">{{ item1.name }}</span>
                                    </div>
                                </div>
                                <div class="o-hidden item mt-5" v-for="(item2,index2) in item1.son" :key="index2">
                                    <div class="pull-left mr-20 pr-20 pl-30" @click="selectPageItem(index1,index2,-1)"
                                         style="border-right:1px solid #ccc;">
                                        <span class="zsf-icon"
                                              :class="item2.choose?'zsf-icon-yixuanze-':'zsf-icon-weixuanze-1'"></span>
                                        <span style="margin-left:3px">{{ item2.name }}</span>
                                    </div>
                                    <div class="pull-left mr-15" v-for="(item3,index3) in item2.son" :key="index3"
                                         @click="selectPageItem(index1,index2,index3)">
                                        <span class="zsf-icon"
                                              :class="item3.choose?'zsf-icon-yixuanze-':'zsf-icon-weixuanze-1'"></span>
                                        <span style="margin-left:3px">{{ item3.name }}</span>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>接口权限</td>
                        <td style="padding-top:5px;">
                            <div v-for="(item1,index1) in auths" :key="index1" class="auths">
                                <div class="item item1 flex-center flex-between mt-5" style="background:#eee">
                                    <div class="flex-center" @click="selectItem(index1,-1,-1)">
                                        <span class="zsf-icon"
                                              :class="item1.choose?'zsf-icon-yixuanze-':'zsf-icon-weixuanze-1'"></span>
                                        <span style="margin-left:3px">{{ item1.name }}</span>
                                    </div>
                                    <!--                  <div @click="toggleShow(index1)">-->
                                    <!--                    <span :class="!item1.show?'el-icon-arrow-down':'el-icon-arrow-up'"></span>-->
                                    <!--                  </div>-->
                                </div>
                                <div class="o-hidden item mt-5" v-for="(item2,index2) in item1.son" :key="index2">
                                    <div class="pull-left mr-20 pr-20 pl-30" @click="selectItem(index1,index2,-1)"
                                         style="border-right:1px solid #ccc;">
                                        <span class="zsf-icon"
                                              :class="item2.choose?'zsf-icon-yixuanze-':'zsf-icon-weixuanze-1'"></span>
                                        <span style="margin-left:3px">{{ item2.name }}</span>
                                    </div>
                                    <div class="pull-left mr-15" v-for="(item3,index3) in item2.son" :key="index3"
                                         @click="selectItem(index1,index2,index3)">
                                        <span class="zsf-icon"
                                              :class="item3.choose?'zsf-icon-yixuanze-':'zsf-icon-weixuanze-1'"></span>
                                        <span style="margin-left:3px">{{ item3.name }}</span>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td></td>
                        <td>
                            <el-button v-preventDbClick @click="submit" type="primary" class="width-200">提交
                            </el-button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</template>

<script type="text/ecmascript-6">
import request from '../../common/js/request.js';
import {tool} from "../../common/js/tool.js";

export default {
    data() {
        return {
            id: 0,
            selectd: [],
            originalAuths: [],
            originalPages: [],
            auths: [],
            pages: [],
            pageSelectd: [],
            addobj: {name: '',},
            list: [],
            breadcrumbData: [],
        };
    },

    computed: {},

    created() {
        this.id = this.$route.query.id ? this.$route.query.id : 0;
        if (this.id) {
            this.breadcrumbData = [{name: '系统管理'}, {name: '编辑角色'}];
        } else {
            this.breadcrumbData = [{name: '系统管理'}, {name: '新增角色'}];
        }
        if (this.id) {
            this.getData(() => {
                this.getPages();
            })
        } else {
            this.getPages();
        }
    },

    methods: {
        submit() {
            // console.log(this.selectd);
            console.log(this.originalAuths);
            let addobj = Object.assign({}, this.addobj);
            addobj['auths'] = [];
            for (let k = 0; k < this.originalAuths.length; k++) {
                if (this.originalAuths[k]['choose']) {
                    addobj.auths.push({
                        auth_id: this.originalAuths[k]['id'],
                        url: this.originalAuths[k]['url']
                    })
                }
            }
            addobj['pages'] = [];
            for (let k = 0; k < this.originalPages.length; k++) {
                if (this.originalPages[k]['choose']) {
                    addobj.pages.push({
                        page_id: this.originalPages[k]['id'],
                        url: this.originalPages[k]['url']
                    })
                }
            }
            console.log(addobj);
            if (this.id) {
                addobj.id = this.id;
                request({
                    url: '/manage/manageRole/edit',
                    data: addobj
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.$router.push({path: "/system/manage-role"});
                    })
                })
            } else {
                request({
                    url: '/manage/manageRole/add',
                    data: addobj
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.$router.push({path: "/system/manage-role"});
                    })
                })
            }
        },

        selectPageItem(index1, index2, index3) {
            let pages = [...this.pages];
            if (index3 > -1) {
                pages[index1].son[index2].son[index3].choose = !pages[index1].son[index2].son[index3].choose;
            } else if (index2 > -1) {
                pages[index1].son[index2].choose = !pages[index1].son[index2].choose;
                for (let i = 0; i < pages[index1].son[index2].son.length; i++) {
                    pages[index1].son[index2].son[i].choose = pages[index1].son[index2].choose;
                }
            } else if (index1 > -1) {
                pages[index1].choose = !pages[index1].choose;
                for (let i = 0; i < pages[index1].son.length; i++) {
                    pages[index1].son[i].choose = pages[index1].choose;
                    for (let k = 0; k < pages[index1].son[i].son.length; k++) {
                        pages[index1].son[i].son[k].choose = pages[index1].choose;
                    }
                }
            }
            this.pages = pages;
            console.log(pages);
        },

        selectItem(index1, index2, index3) {
            let auths = [...this.auths];
            if (index3 > -1) {
                auths[index1].son[index2].son[index3].choose = !auths[index1].son[index2].son[index3].choose;
            } else if (index2 > -1) {
                auths[index1].son[index2].choose = !auths[index1].son[index2].choose;
                for (let i = 0; i < auths[index1].son[index2].son.length; i++) {
                    auths[index1].son[index2].son[i].choose = auths[index1].son[index2].choose;
                }
            } else if (index1 > -1) {
                auths[index1].choose = !auths[index1].choose;
                for (let i = 0; i < auths[index1].son.length; i++) {
                    auths[index1].son[i].choose = auths[index1].choose;
                    for (let k = 0; k < auths[index1].son[i].son.length; k++) {
                        auths[index1].son[i].son[k].choose = auths[index1].choose;
                    }
                }
            }
            this.auths = auths;
            console.log(auths);
        },

        toggleShow(index) {
            let auths = [...this.auths];
            auths[index].show = !auths[index].show;
            this.auths = auths;
        },

        getData() {
            if (this.id) {
                request({
                    url: '/manage/manageRole/one',
                    data: {id: this.id}
                }).then((res) => {
                    this.addobj.name = res.data.name;
                    this.selectd = res.data.auths;
                    this.pageSelectd = res.data.pages;
                    // console.log(res)
                    this.getPages()
                })
            }
        },

        getPages(callback) {
            request({
                url: '/manage/managePage/all'
            }).then((res) => {
                this.originalPages = res.data;
                let array = [];
                for (let i = 0; i < res.data.length; i++) {
                    if (this.pageSelectd.indexOf(res.data[i].id) > -1) {
                        res.data[i].choose = true;
                    } else {
                        res.data[i].choose = false;
                    }
                    if (res.data[i].parent_id == 0) {
                        res.data[i].son = [];
                        array.push(res.data[i])
                    } else {
                        res.data[i].son = []
                    }
                }
                // console.log(array)
                for (let i = 0; i < res.data.length; i++) {
                    for (let k = 0; k < array.length; k++) {
                        if (res.data[i].parent_id == array[k].id) {
                            array[k]['son'].push(res.data[i]);
                        }
                    }
                }
                // console.log(array);
                this.pages = [{name: '全部', id: 0, son: array}];
                this.getAuths();
            })
        },

        getAuths(callback) {
            request({
                url: '/manage/auth/all'
            }).then((res) => {
                this.originalAuths = res.data;
                // console.log(this.originalAuths)
                let data = res.data;
                for (let i = 0; i < data.length; i++) {
                    data[i].son = [];
                    if (this.selectd.indexOf(data[i].id) > -1) {
                        data[i].choose = true;
                    } else {
                        data[i].choose = false;
                    }
                }
                let list = [];
                for (let i = 0; i < data.length; i++) {
                    if (data[i].parent_id === 0 && data[i]['id'] == 1) {
                        data[i]['son'] = [];
                        list.push(data[i]);
                    }
                }
                for (let i = 0; i < data.length; i++) {
                    for (let k = 0; k < list.length; k++) {
                        if (data[i]['parent_id'] === list[k]['id']) {
                            data[i]['son'] = [];
                            list[k]['son'].push(data[i]);
                        }
                    }
                }
                for (let i = 0; i < data.length; i++) {
                    for (let k = 0; k < list.length; k++) {
                        for (let kk = 0; kk < list[k]['son'].length; kk++) {
                            if (data[i]['parent_id'] === list[k]['son'][kk]['id']) {
                                list[k]['son'][kk]['son'].push(data[i]);
                            }
                        }
                    }
                }
                for (let i = 0; i < list.length; i++) {
                    list[i].show = true;
                    //list[i].show = false;if (i === 0) {list[i].show = true;}
                }
                this.auths = list;
                callback && callback();
            })
        },
    },

};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import url("../../common/css/variable.less");

.index-container {
    .auths {
        .item {
            border: 1px solid #eee;
            padding: 15px;
        }
    }

    .image {
        width: 50px;
        height: 50px;
        border: none;
        margin-top: 5px;
    }
}
</style>


